<template>
	<view class="coupon">
		<view class="coupon_top">
			<view class="coupon_top_a">
				<view class="coupon_top_shang">
					<view class="coupon_top_shang_title">
						<text class="text1" @click="handclick(item.id)" v-for="item in list" :key="item.id" :class="ID==item.id ? 'active' : ''" >{{item.title}}</text>
						<!-- <text class="text2"></text> -->
					</view>
				</view>
				
			</view>
			<view class="coupon_top_bottom" v-if="ID==1">
				<view class="coupon_top_bottom_a" v-for="it in image" :key="it.id">
					<image class="img" :src="it.src"></image>
				</view>
			</view>
			<view class="coupon_top_bottom" v-else-if="ID==2">
				<view class="coupon_top_bottom_a" >
					<image class="img" src="../../static/img/zhu1.png"></image>
				</view>
			</view>
			<view class="coupon_top_bottom" v-else-if="ID==3">
				<view class="coupon_top_bottom_a">
					<image class="img" src="../../static/img/zhu2.png"></image>
				</view>
			</view>
			<view class="coupon_top_bottom" v-if="ID==4">
				<view class="coupon_top_bottom_a">
					<image class="img" src="../../static/img/zhu3.png"></image>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				ID:1,
				list:[
					{
						id:1,
						title:'全部',
					},
					{
						id:2,
						title:'未使用',
					},
					{
						id:3,
						title:'已使用',
					},
					{
						id:4,
						title:'已过期',
					},
				],
				image:[
					{
						id:1,
						src:"../../static/img/zhu1.png",
					},
					{
						id:2,
						src:"../../static/img/zhu2.png",
					},
					{
						id:3,
						src:"../../static/img/zhu3.png",
					},
				]
			}
		},
		methods:{
			handclick(id){
				this.ID = id;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/sass/coupon.scss'
</style>